<!--
 * @Author: Lin Hongwei
 * @Date: 2021-11-27 15:40:22
 * @LastEditTime: 2021-12-05 13:57:03
 * @LastEditors: Lin Hongwei
 * @email: 1365755396@qq.com
 * @CSDN: https://blog.csdn.net/weixin_45429409
 * @Description: 
-->
<template>
  <div>
    <div class="name">{{ message }}</div>
    <!-- 图片直接引入 -->
    <img src="./assets/logo.jpg" />
    <img :src="logoImg" />
    <div class="bg"></div>
    <button @click="add">添加</button>
    <ul>
      <li class="li" v-for="(item, index) in list" :key="index">{{item}}</li>
    </ul>
  </div>
</template>
<script>
// 导入方式
import LogoIcon from "./assets/logo.jpg";
export default {
  name: "App",
  data() {
    return {
      message: "Hello Vue",
      logoImg: require("./assets/logo.jpg"),
      list: ["a", "b", "c"],
    };
  },
  methods: {
    add() {
      this.list.push("a" + Math.floor(Math.random() * 10));
    },
  },
};
</script>
<style lang="scss" scoped>
@import url(~@/style/main.css);
.name {
  color: blue;
  font-weight: bolder;
  font-size: 30px;
}
.bg {
  width: 400px;
  height: 400px;
  background: url("./assets/logo.jpg") no-repeat center;
  background-size: cover;
  transform: translateX(100px);
}
.li:nth-of-type(odd){
  color: blue;   
  font-size: 50px;
  font-weight: bolder;
}
</style>